<!DOCTYPE html>
<html>
<head>
    <title>告警渠道</title>
    <#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/bootstrap-select/css/bootstrap-select.min.css?_${.now?long}">
    <style>
        /*去除选择框的outline*/
        .bootstrap-select .dropdown-toggle:focus{outline:none !important;}
        /*去除选项的outline*/
        a:focus {outline:none !important;}
        .input-group .form-control {
            position: relative;
            z-index: inherit!important;
            float: left;
            width: 100%;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList && (!showPanels && !showPanel)">
        <div class="grid-btn">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.dashboardName" @keyup.enter="query" placeholder="仪表盘名称">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
            <#if shiro.hasPermission("monitor:dashboard:add")>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            </#if>
            <#if shiro.hasPermission("monitor:dashboard:update")>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            </#if>
            <#if shiro.hasPermission("monitor:dashboard:remove")>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
            </#if>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList && (!showPanels && !showPanel)" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal" style="width: 700px;">
            <div class="form-group">
                <div class="col-sm-2 control-label">仪表盘名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="dashboard.dashboardName" placeholder="仪表盘名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                <input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>

    <nav class="navbar navbar-default" v-show="showPanels && (!showList && !showPanel)">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">{{dashboard.dashboardName}}</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" @click="addPanel()">添加</a></li>
                    <li><a href="#" @click="returnDashboard()">返回</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">返回</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div v-show="showPanel && (!showPanels && !showList)">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#query" role="tab" data-toggle="tab">查询</a>
            </li>
            <li role="presentation">
                <a href="#visual" role="tab" data-toggle="tab">可视化</a>
            </li>
            <li role="presentation">
                <a href="#alert" role="tab" data-toggle="tab">告警</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="query">
                <!--添加panel表单-->
                <div v-show="showPanel && (!showPanels && !showList)" class="panel panel-default">
                    <form  role="form" style="width: 100%;"><!--class="form-horizontal"-->
                        <!--指标变量-->
                        <div class="form-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">查询表达式</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="input-group" v-for="(item,index) in editPanel.targets" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">变量{{item.variable}}</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" class="form-control fc-clear" v-model="item.expression"/>
                                        </div>
                                        <span class="input-group-btn"><button class="btn btn-primary" type="button" @click="removeExpression(index)">移除</button></span>
                                    </div>
                                    <button type="button" class="btn btn-default btn-sm" @click="addExpression">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">计算公式</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">计算公式</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" v-model="editPanel.formula" class="form-control fc-clear"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">告警名称</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">通知渠道</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" v-model="rule.ruleName" class="form-control fc-clear"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group form-inline">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">告警规则</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">检查频率</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" v-model="rule.frequency" class="form-control fc-clear"/>
                                            <!--<div class="input-group-btn">
                                                <select name="type" class="form-control selectpicker" style="width: auto;">
                                                    <option value="s">秒</option>
                                                    <option value="m">分钟</option>
                                                    <option value="h">小时</option>
                                                </select>
                                            </div>-->
                                        </div>
                                    </div>
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">判决周期</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" v-model="rule.period" class="form-control fc-clear"/>
                                            <!--<div class="input-group-btn">
                                                <select name="type" class="form-control selectpicker" style="width: auto;">
                                                    <option value="s">秒</option>
                                                    <option value="m">分钟</option>
                                                    <option value="h">小时</option>
                                                </select>
                                            </div>-->
                                        </div>
                                    </div>
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">比较符</button></span>
                                        <div class="input-icon-group">
                                            <select name="type" v-model="rule.operator" class="form-control selectpicker" style="width: auto;">
                                                <option value="gt">大于</option>
                                                <option value="gte">大于等于</option>
                                                <option value="lt">小于</option>
                                                <option value="lte">小于等于</option>
                                                <option value="in">范围内</option>
                                                <option value="out">范围外</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">告警类别</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" v-model="rule.alertType" class="form-control fc-clear"/>
                                        </div>
                                    </div>
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">告警级别</button></span>
                                        <div class="input-icon-group">
                                            <input type="text" v-model="rule.alertLevel" class="form-control fc-clear"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">通知渠道</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="input-group" style="margin-bottom: 5px;">
                                        <span class="input-group-btn"><button class="btn btn-default" type="button">通知渠道</button></span>
                                        <div class="input-icon-group">
                                            <select name="type" v-model="rule.notifications" class="form-control selectpicker" style="width: auto;" data-live-search="true">
                                                <option value="email">email</option>
                                                <option value="wechat">微信</option>
                                                <option value="dingtalk">钉钉</option>
                                                <option value="webhook">webhook</option>
                                                <option value="sms">短信</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">消息模板</h3>
                                </div>
                                <div class="panel-body">
                                    <textarea v-model="rule.messageTemplate" class="form-control fc-clear" rows="5" name=textarea></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-2 control-label"></div>
                            <input type="button" class="btn btn-primary" @click="savePanel" value="确定"/>
                            <input type="button" class="btn btn-warning" @click="returnPanels" value="返回"/>
                        </div>
                    </form>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="visual">可视化</div>
            <div role="tabpanel" class="tab-pane fade" id="alert">告警</div>
        </div>
    </div>

</div>
<script src="${request.contextPath}/statics/js/modules/monitor/dashboard.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/plugins/bootstrap-select/js/bootstrap-select.min.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/plugins/bootstrap-select/js/i18n/defaults-zh_CN.min.js?_${.now?long}"></script>
</body>
</html>